import React, {
  Component,
  PropTypes,
} from 'react';
import {
  StyleSheet,
  Text,
  Animated,
  ActivityIndicator,
  Dimensions,
  Platform,
  View,
  Keyboard,
} from 'react-native';

console.disableYellowBox = true;

const Screen = Dimensions.get('window');

const propTypes = {
  timeout: PropTypes.number,
  fadeTime: PropTypes.number,
  minOpacity: PropTypes.number,
  maxOpacity: PropTypes.number,
  show: PropTypes.bool,
};

const defaultProps = {
  timeout: 3000,
  fadeTime: 50,
  minOpacity: 0.0,
  maxOpacity: 1.0,
  show: false,
};

class LoadingTip extends Component {
  constructor(props) {
    super(props);

    this.state = {
      opacityValue: new Animated.Value(this.props.minOpacity),
      keyboardHeight:0,
    };
  }

  componentWillMount () {
    this.keyboardWillShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow.bind(this))
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this))
  }

  componentWillUnmount () {
    this.keyboardWillShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  keyboardWillShow (e) {
      // 暂时仅兼容android
      if (Platform.OS === "android") {
          this.setState({keyboardHeight:e.endCoordinates.height});
      }
  }

  keyboardDidHide () {
      // 暂时仅兼容android
      if (Platform.OS === "android") {
          this.setState({keyboardHeight:0});
      }
  }

  componentWillReceiveProps(nextProps) {

    if (nextProps.show){
        this.fadeIn();
    }

  }

  fadeIn=() => {
    Animated.timing(this.state.opacityValue, {
      duration: this.props.fadeTime,
      toValue: this.props.maxOpacity,
    }).start();

  }

  fadeOut = () => {
    Animated.timing(this.state.opacityValue, {
      duration: this.props.fadeTime,
      toValue: this.props.minOpacity,
    }).start();

  }

  render() {
    let {keyboardHeight} = this.state;
    if (!this.props.show) {
      return null;
    }

    let offset = this.props.offset || 60;
    return (
        <Animated.View style={[styles.container, {opacity: this.state.opacityValue,bottom:(Screen.height - keyboardHeight - offset) / 2}]}>
            <ActivityIndicator size="small" color={Platform.OS === "ios" ? "#f3f3f3" : "#EA0000"} />
        </Animated.View>
    );
  }
}

LoadingTip.propTypes = propTypes;
LoadingTip.defaultProps = defaultProps;

const styles = StyleSheet.create({
  containerT:{
      position: 'absolute',
      backgroundColor: '#ffffff',
      width: Screen.width,
      height: Screen.height,
      top:0,
      left:0,
      zIndex: 10
  },
  container: {
    position: 'absolute',
    bottom: (Screen.height - 60) / 2,
    width: 60,
    height: 60,
    left: (Screen.width - 60) / 2,
    right: (Screen.width - 60) / 2,
    backgroundColor: '#444',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 6,
    borderRadius: 12,
    shadowColor: '#f3f3f3',
    shadowOpacity: 0.5,
    shadowRadius: 1,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    zIndex: 11
  },
  message: {
    color: '#555555',
    fontSize: 15,
    textAlign: 'center',
  },
});

export default LoadingTip;
